﻿@model RegisterModel
@using Nop.Web.Models.Customer;
@{
    Layout = "~/Views/Shared/_ColumnsTwo.cshtml";

    //title
    Html.AddTitleParts(T("PageTitle.Register").Text);
}
@if (Model.CountryEnabled && Model.StateProvinceEnabled)
{
    <script type="text/javascript">
        $(function () {
            $("#@Html.FieldIdFor(model => model.CountryId)").change(function () {
             var selectedItem = $(this).val();
             var ddlStates = $("#@Html.FieldIdFor(model => model.StateProvinceId)");
                var statesProgress = $("#states-loading-progress");
                statesProgress.show();
                $.ajax({
                    cache: false,
                    type: "GET",
                    url: "@(Url.RouteUrl("GetStatesByCountryId"))",
                    data: { "countryId": selectedItem, "addEmptyStateIfRequired": "true" },
                    success: function (data) {
                        ddlStates.html('');
                        $.each(data, function (id, option) {
                            ddlStates.append($('<option></option>').val(option.id).html(option.name));
                        });
                        statesProgress.hide();
                    },
                    error: function (xhr, ajaxOptions, thrownError) {
                        alert('Failed to retrieve states.');
                        statesProgress.hide();
                    }
                });
            });
     });
    </script>
}
@using (Html.BeginForm())
{
    @Html.AntiForgeryToken()
    <div class="page registration-page">
        <div class="page-title">
            <h1>@T("Account.Register")</h1>
        </div>
        <div class="page-body">
            <div class="message-error">
                @Html.ValidationSummary(true)
            </div>
            @Html.Partial("_ExternalAuthentication.AssociateMessage")
            <div class="fieldset">
                <div class="title">
                    <strong>@T("Account.YourPersonalDetails")</strong>
                </div>
                <div class="form-fields">
                    @if (Model.GenderEnabled)
                    {
                        <div class="inputs">
                            <label>@T("Account.Fields.Gender"):</label>
                            <div class="gender">
                                @Html.RadioButton("Gender", "M", (Model.Gender == "M"), new { id = "gender-male" })
                                <label class="forcheckbox" for="gender-male">@T("Account.Fields.Gender.Male")</label>
                            </div>
                            <div class="gender">
                                @Html.RadioButton("Gender", "F", (Model.Gender == "F"), new { id = "gender-female" })
                                <label class="forcheckbox" for="gender-female">@T("Account.Fields.Gender.Female")</label>
                            </div>
                        </div>
                    }
                    <div class="inputs">
                        @Html.LabelFor(model => model.FirstName, new { }, ":")
                        @Html.EditorFor(model => model.FirstName)
                        @Html.RequiredHint()
                        @Html.ValidationMessageFor(model => model.FirstName)
                    </div>
                    <div class="inputs">
                        @Html.LabelFor(model => model.LastName, new { }, ":")
                        @Html.EditorFor(model => model.LastName)
                        @Html.RequiredHint()
                        @Html.ValidationMessageFor(model => model.LastName)
                    </div>
                    @if (Model.DateOfBirthEnabled)
                    {
                        <div class="inputs">
                            <label>@T("Account.Fields.DateOfBirth"):</label>
                            @Html.DatePickerDropDowns(Html.FieldNameFor(x => x.DateOfBirthDay),
                                Html.FieldNameFor(x => x.DateOfBirthMonth),
                                Html.FieldNameFor(x => x.DateOfBirthYear),
                                DateTime.Now.Year - 110,
                                DateTime.Now.Year,
                                Model.DateOfBirthDay,
                                Model.DateOfBirthMonth,
                                Model.DateOfBirthYear)
                            @Html.ValidationMessageFor(model => model.DateOfBirthDay)
                            @Html.ValidationMessageFor(model => model.DateOfBirthMonth)
                            @Html.ValidationMessageFor(model => model.DateOfBirthYear)
                        </div>
                    }
                    <div class="inputs">
                        @Html.LabelFor(model => model.Email, new { }, ":")
                        @Html.EditorFor(model => model.Email)
                        @Html.RequiredHint()
                        @Html.ValidationMessageFor(model => model.Email)
                    </div>
                    @if (Model.UsernamesEnabled)
                    {
                        <div class="inputs">
                            @Html.LabelFor(model => model.Username, new { }, ":")
                            @Html.EditorFor(model => model.Username)
                            @Html.RequiredHint()
                            @Html.ValidationMessageFor(model => model.Username)
                            @if (Model.CheckUsernameAvailabilityEnabled)
                            {
                                @Html.Partial("_CheckUsernameAvailability")
                            }
                        </div>
                        
                    }
                </div>
            </div>
            @if (Model.CompanyEnabled || Model.DisplayVatNumber)
            {
                <div class="fieldset">
                    <div class="title">
                        <strong>@T("Account.CompanyDetails")</strong>
                    </div>
                    <div class="form-fields">
                        @if (Model.CompanyEnabled)
                        {
                            <div class="inputs">
                                @Html.LabelFor(model => model.Company, new { }, ":")
                                @Html.EditorFor(model => model.Company)
                                @if (Model.CompanyRequired)
                                {
                                    @Html.RequiredHint()
                                }
                                @Html.ValidationMessageFor(model => model.Company)
                            </div>
                        }
                        @if (Model.DisplayVatNumber)
                        {
                            <div class="inputs">
                                @Html.LabelFor(model => model.VatNumber, new { }, ":")
                                @Html.EditorFor(model => model.VatNumber)
                                <span class="vat-note"><em>@T("Account.Fields.VatNumber.Note")</em></span>
                            </div>
                        }
                    </div>
                </div>
            }
            @if (Model.StreetAddressEnabled || Model.StreetAddress2Enabled || Model.ZipPostalCodeEnabled
            || Model.CityEnabled || Model.CountryEnabled)
            {
                <div class="fieldset">
                    <div class="title">
                        <strong>@T("Account.YourAddress")</strong>
                    </div>
                    <div class="form-fields">
                        @if (Model.StreetAddressEnabled)
                        {
                            <div class="inputs">
                                @Html.LabelFor(model => model.StreetAddress, new { }, ":")
                            @Html.EditorFor(model => model.StreetAddress)
                                @if (Model.StreetAddressRequired)
                                {
                                    @Html.RequiredHint()
                                }
                                @Html.ValidationMessageFor(model => model.StreetAddress)
                            </div>
                        }
                        @if (Model.StreetAddress2Enabled)
                        {
                            <div class="inputs">
                                @Html.LabelFor(model => model.StreetAddress2, new { }, ":")
                            @Html.EditorFor(model => model.StreetAddress2)
                                @if (Model.StreetAddress2Required)
                                {
                                    @Html.RequiredHint()
                                }
                                @Html.ValidationMessageFor(model => model.StreetAddress2)
                            </div>
                        }
                        @if (Model.ZipPostalCodeEnabled)
                        {
                            <div class="inputs">
                                @Html.LabelFor(model => model.ZipPostalCode, new { }, ":")
                            @Html.EditorFor(model => model.ZipPostalCode)
                                @if (Model.ZipPostalCodeRequired)
                                {
                                    @Html.RequiredHint()
                                }
                                @Html.ValidationMessageFor(model => model.ZipPostalCode)
                            </div>
                        }
                        @if (Model.CityEnabled)
                        {
                            <div class="inputs">
                                @Html.LabelFor(model => model.City, new { }, ":")
                            @Html.EditorFor(model => model.City)
                                @if (Model.CityRequired)
                                {
                                    @Html.RequiredHint()
                                }
                                @Html.ValidationMessageFor(model => model.City)
                            </div>
                        }
                        @if (Model.CountryEnabled)
                        {
                            <div class="inputs">
                                @Html.LabelFor(model => model.CountryId, new { }, ":")
                            @Html.DropDownList("CountryId", Model.AvailableCountries)
                            </div>
                        }
                        @if (Model.CountryEnabled && Model.StateProvinceEnabled)
                        {
                            <div class="inputs">
                                @Html.LabelFor(model => model.StateProvinceId, new { }, ":")
                            @Html.DropDownList("StateProvinceId", Model.AvailableStates)
                                <span id="states-loading-progress" style="display: none;" class="please-wait">@T("Common.Wait...")</span>
                            </div>
                        }
                    </div>
                </div>
            }
            @if (Model.PhoneEnabled || Model.FaxEnabled)
            {
                <div class="fieldset">
                    <div class="title">
                        <strong>@T("Account.YourContactInformation")</strong>
                    </div>
                    <div class="form-fields">
                        @if (Model.PhoneEnabled)
                        {
                            <div class="inputs">
                                @Html.LabelFor(model => model.Phone, new { }, ":")
                                @Html.EditorFor(model => model.Phone)
                                @if (Model.PhoneRequired)
                                {
                                    @Html.RequiredHint()
                                }
                                @Html.ValidationMessageFor(model => model.Phone)
                            </div>
                        }
                        @if (Model.FaxEnabled)
                        {
                            <div class="inputs">
                                @Html.LabelFor(model => model.Fax, new { }, ":")
                                @Html.EditorFor(model => model.Fax)
                                @if (Model.FaxRequired)
                                {
                                    @Html.RequiredHint()
                                }
                                @Html.ValidationMessageFor(model => model.Fax)
                            </div>
                        }
                    </div>
                </div>
            }
            @if (Model.NewsletterEnabled || Model.CustomerAttributes.Count > 0)
            {
                <div class="fieldset">
                    <div class="title">
                        <strong>@T("Account.Options")</strong>
                    </div>
                    <div class="form-fields">
                        @if (Model.NewsletterEnabled)
                        {
                            <div class="inputs">
                                @Html.LabelFor(model => model.Newsletter, new {}, ":")
                                @Html.EditorFor(model => model.Newsletter)
                                @Html.ValidationMessageFor(model => model.Newsletter)
                            </div>
                        }
                        @if (Model.CustomerAttributes.Count > 0)
                        {
                            @Html.Partial("_CustomerAttributes", Model.CustomerAttributes)
                        }
                    </div>
                </div>
            }
            @if (Model.AllowCustomersToSetTimeZone)
            {
                <div class="fieldset">
                    <div class="title">
                        <strong>@T("Account.Preferences")</strong>
                    </div>
                    <div class="form-fields">
                        @if (Model.AllowCustomersToSetTimeZone)
                        {
                            <div class="inputs">
                                @Html.LabelFor(model => model.TimeZoneId, new { }, ":")
                                @Html.DropDownList("TimeZoneId", Model.AvailableTimeZones)
                                @Html.ValidationMessageFor(model => model.TimeZoneId)
                            </div>
                        }
                    </div>
                </div>
            }
            <div class="fieldset">
                <div class="title">
                    <strong>@T("Account.YourPassword")</strong>
                </div>
                <div class="form-fields">
                    <div class="inputs">
                        @Html.LabelFor(model => model.Password, new { }, ":")
                        @Html.EditorFor(model => model.Password)
                        @Html.RequiredHint()
                        @Html.ValidationMessageFor(model => model.Password)
                    </div>
                    <div class="inputs">
                        @Html.LabelFor(model => model.ConfirmPassword, new { }, ":")
                        @Html.EditorFor(model => model.ConfirmPassword)
                        @Html.RequiredHint()
                        @Html.ValidationMessageFor(model => model.ConfirmPassword)
                    </div>
                    @if (Model.DisplayCaptcha)
                    {
                        <div class="captcha-box">
                            @Html.Raw(Html.GenerateCaptcha())
                        </div>
                    }
                </div>
            </div>
            @if (Model.AcceptPrivacyPolicyEnabled)
            {
                <script type="text/javascript">
                    $(document).ready(function () {
                        $('#register-button').click(function () {
                            if ($('#accept-privacy-policy').is(':checked')) {
                                //do some stuff
                                return true;
                            }
                            else {
                                //just show validation errors, dont post
                                alert('@Html.Raw(HttpUtility.JavaScriptStringEncode(T("Account.Fields.AcceptPrivacyPolicy.Required").Text))');
                                return false;
                            }
                        });
                    });
                </script>
                <div class="accept-privacy-policy">
                    <input id="accept-privacy-policy" type="checkbox" name="accept-privacy-policy" />
                    <label for="accept-privacy-policy">@T("Account.Fields.AcceptPrivacyPolicy")</label>
                    <span class="read" onclick="javascript:OpenWindow('@Url.RouteUrl("TopicPopup", new { SystemName = "privacyinfo" })', 450, 500, true)">@T("Account.Fields.AcceptPrivacyPolicy.Read")</span>
                </div>
            }
            <div class="buttons">
                <input type="submit" id="register-button" class="button-1 register-next-step-button" value="@T("Account.Register.Button")" name="register-button" />
            </div>
        </div>
    </div>
}